<template>
  <div class="PaperExamDetailInfo">
    <div class="course-practice-panel" v-if="step===1">
      <QuestionDetailInfo
        :curIndex="curIndex"
        :isLast="curIndex===paperExamDetail.questions.length-1"
        v-model="paperExamDetail.questions[curIndex]"
        @pre="pre"
        @next="next"
      ></QuestionDetailInfo>

      <div class="total-panel">
        <p v-text="paperExamDetail.title" class="bor-bottom title"></p>
        <div class="bor-bottom countdown">
          <img src="@/assets/imgs/countdown.png" width="32" height="36" />
          <div class="right">
            <p class="text_size_8">剩余时间：</p>
            <p v-text="countdownText" class="text_color_429688 text_size_24 text_bold"></p>
          </div>
        </div>
        <div class="bor-bottom">
          <div class="m_t_22 text_size_8">
            总题数：
            <span class="text_color_429688">{{paperExamDetail.paperQuestionNum}}</span>
          </div>
          <div class="m_t_22 text_size_8" style="margin-bottom:10px;">答题卡</div>
        </div>
        <el-radio-group v-model="curIndex">
          <ul class="questions_nav">
            <li v-for="(item,index) in paperExamDetail.questions" :key="index">
              <el-radio :label="index">{{index+1}}</el-radio>
            </li>
          </ul>
        </el-radio-group>
        <div class="m_t_15" style="text-align:center;">
          <el-button
            type="primary"
            size="small"
            @click="submit"
            :loading="loading"
            style="width:80%"
          >交卷</el-button>
        </div>
      </div>
    </div>

    <div v-if="step===2" class="exam-summary">
      <p class="text-center text_size_24 text_color_333333">恭喜您，完成答题测试！</p>
      <p class="text-center text_size_24 text_color_333333">
        <span>您将获得&nbsp;</span>
        <span class="text_color_429688">{{examResult.userPoints}}</span>
        <span>&nbsp;学分</span>
      </p>
      <el-tabs v-model="activeName">
        <el-tab-pane label="本次成绩" name="1">
          <div class="score-panel">
            <div class="left">
              <p v-text="examResult.paperTotalScore" class="text_color_429688 text_size_8"></p>
              <p class="text_size_8">试卷总分</p>
            </div>
            <div class="center">
              <div class="score text_color_429688">{{examResult.userScore}}分</div>
            </div>
            <div class="right">
              <p v-text="useTimeText" class="text_color_429688"></p>
              <p>用时</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="答题分析" name="2">
          <el-radio-group v-model="resultActiveLabel">
            <el-radio-button label="errorInfo">答错({{examResult.errorInfo.list.length}})</el-radio-button>
            <el-radio-button label="rightInfo">答对({{examResult.rightInfo.list.length}})</el-radio-button>
            <!-- <el-radio-button label="missedInfo">未答({{examResult.missedInfo.list.length}})</el-radio-button> -->
            <el-radio-button label="allInfo">全部试题({{examResult.allInfo.list.length}})</el-radio-button>
          </el-radio-group>
          <div class="course-practice-panel">
            <QuestionDetailInfo
              :curIndex="examResult[resultActiveLabel].curIndex"
              :isLast="examResult[resultActiveLabel].curIndex===examResult[resultActiveLabel].list.length-1"
              v-model="examResult[resultActiveLabel].list[examResult[resultActiveLabel].curIndex]"
              @pre="resultPre"
              @next="resultNext"
              :showInput="false"
            ></QuestionDetailInfo>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
const QuestionDetailInfo = () => import('@/components/QuestionDetailInfo')

export default {
  name: 'PaperExamDetailInfo',
  props: {
    paperExamDetail: {
      type: Object,
      default() {
        return {}
      }
    },
    // 1 在线考试，2 课后练习
    examType: {
      type: Number,
      default: 1
    }
  },
  components: {
    QuestionDetailInfo
  },
  data() {
    return {
      step: 1,
      curIndex: 0,
      answer: [],
      loading: false,
      activeName: '1',
      examResult: {
        errorInfo: {
          curIndex: 0,
          list: []
        },
        rightInfo: {
          curIndex: 0,
          list: []
        },
        missedInfo: {
          curIndex: 0,
          list: []
        },
        allInfo: {
          curIndex: 0,
          list: []
        }
      },
      resultActiveLabel: 'errorInfo',
      countdownTimer: null
    }
  },
  computed: {
    useTimeText() {
      return utils.convertTime((new Date(this.examResult.userEnd.replace(/-/g, '/')).getTime() - new Date(this.examResult.userStart.replace(/-/g, '/')).getTime()) / 1000)
    },
    countdownText() {
      return utils.countdown(this.paperExamDetail.countdown)
    }
  },
  created() {
    this.fetchRemainTime()
  },
  methods: {
    pre() {
      this.curIndex--
    },
    next() {
      this.curIndex++
    },
    startCountdown() {
      this.countdownTimer = setTimeout(() => {
        if (this.paperExamDetail.countdown > 0) {
          this.paperExamDetail.countdown--
          this.startCountdown()
        } else {
          // 到时间后自动交卷
          this.submit()
        }
      }, 1000)
    },
    submit() {
      const submitPath = this.examType === 1 ? utils.api.examInfo.examSubmit : '/curriculum/TestSubmit'
      // 交卷
      this.loading = true
      var parmas = { paperId: this.paperExamDetail.paperId, submitData: [] }
      this.paperExamDetail.questions.forEach(element => {
        var item = {}
        item.questionId = element.questionId
        item.questionType = element.questionType
        //  questionType 试题类型 2 填空题 3 判断题  0 单选 1 多选
        switch (element.questionType) {
          case 0:
          case 3:
            item.answer = ''
            break;
          case 1:
          case 2:
            item.answer = []
            break;
        }
        if (element.questionType !== 2) {
          element.questionOptionList.forEach(p => {
            if (element.questionType === 1) {
              if (element.selectedAnswer.length > 0 && element.selectedAnswer.indexOf(p.optionId) !== -1) {
                item.answer.push(p.optionLabel)
              }
            } else {
              if (element.selectedAnswer === p.optionId) {
                item.answer = p.optionLabel
              }
            }
          })
        } else if (element.questionType === 2) {
          element.questionOptionList.forEach(p => {
            if (p.answerContent) {
              item.answer.push(p.answerContent)
            }
          })
        }
        parmas.submitData.push(item)
      })
      console.log('提交参数：' + JSON.stringify(parmas))
      utils.post(submitPath, parmas, res => {
        if (res.success) {
          this.step = 2
          this.examResult = Object.assign(this.examResult, res.data.examResult)
          res.data.answerAnalysis.forEach(element => {
            if (element.isTrue === 1) {
              this.examResult.rightInfo.list.push(element)
            } else if (element.isTrue === 0) {
              this.examResult.errorInfo.list.push(element)
            }
            if (element.questionType === 2 && element.userAnswer) {
              var tempUserAnswer = element.userAnswer.split(',')
              for (var i = 0; i < element.questionOptionList.length; i++) {
                element.questionOptionList[i].answerContent = tempUserAnswer[i]
              }
            }
            this.examResult.allInfo.list.push(element)
          })
          console.log(this.examResult.errorInfo)
        } else {
          this.loading = false
        }
        utils.setStartExam('0')

        this.stopCountdown()
      })
    },
    fetchRemainTime() {
      var path = this.examType === 1 ? '/examination/getExamRemainTime' : '/curriculum/getTestRemainTime'
      utils.post(path, {
        paperId: this.paperExamDetail.paperId
      }, res => {
        if (res.success) {
          // 小于等于 0 的情况，当作新的考试处理。
          if (res.data.remainTime > 0) {
            this.paperExamDetail.countdown = res.data.remainTime * 60
          } else {
            this.paperExamDetail.countdown = this.paperExamDetail.paperTimeLong
            // this.$message.error('考试时间超时')
            // this.$router.go(-2)
          }
          this.startCountdown()
        }
      })
    },
    resultPre() {
      this.examResult[this.resultActiveLabel].curIndex--
    },
    resultNext() {
      this.examResult[this.resultActiveLabel].curIndex++
    },
    stopCountdown() {
      clearTimeout(this.countdownTimer)
    }
  },
  destroyed() {
    this.stopCountdown()
  }
}
</script>
<style lang="less">
.PaperExamDetailInfo {
  .course-practice-panel {
    display: flex;

    .question-panel {
      padding: 20px;

      flex: 1;
      .answer {
        margin-left: 2em;
      }

      .footer {
        display: flex;
        margin-left: 2em;

        .el-button {
          width: 10.4vw;
        }
      }
    }

    .total-panel {
      padding: 20px;
      padding-right: 0px;
      border-left: 1px solid #dddddd;
      width: 12vw;
      margin-left: auto;
      p {
        padding-bottom: 10px;
        padding-right: 10px;
      }

      .title {
        font-weight: bold;
        font-size: 14px;
      }

      .countdown {
        display: flex;
        align-items: center;
        height: 3vw;
        img {
          display: flex;
        }

        .right {
          margin-left: 1.6vw;
          p {
            padding: 0px;
          }
        }
      }

      .el-radio-group {
        display: block;
      }
      .questions_nav {
        display: flex;
        flex-wrap: wrap;
        .el-radio {
          display: flex;
          flex-direction: column;
          padding: 5px;
          align-items: center;

          .el-radio__label {
            font-size: 16px;
            padding: 0px;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .exam-summary {
    margin-top: 2.5vw;
    padding: 0px 15px;
    min-height: 34vw;
    .score-panel {
      display: flex;
      width: 28.3vw;
      margin: 47px auto 0px auto;
      .left,
      .center,
      .right {
        flex: 1;
        display: flex;
        height: 10.6vw;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        p {
          text-align: center;
        }
      }

      .center {
        .score {
          width: 203px;
          height: 203px;
          background-repeat: no-repeat;
          background: url("../assets/imgs/score_bg.png");
          background-size: 100% 100%;
          text-align: center;
          line-height: 203px;
          font-size: 48px;
        }
      }
    }
    .el-tabs {
      margin-left: 70px;
      margin-right: 70px;
    }
    .el-tabs__item {
      font-size: 16px;
    }
  }
}
</style>